<template>
  <Fragment>
    <div class="head-wrap borderBottom-1px">
      <div class="title left borderBottom-2px">{{title}}</div>
      <div class="operate right">                  
      </div>
    </div>
    <div class="content-wrap">
      <div class="chart-content">
        <ul>
          <li v-for="i in 10" :key="i">
            <div class="num"> <strong>12356</strong> 人次 </div>
            <div class="word">
              <div class="tip">
                <span class="iconfont icon-menzhenzongrenci"></span>
              </div>                            
              <div class="label">
                <div class="chinese">门诊总人次</div>
                <div class="english">MENZHEN</div>
              </div>
            </div>
          </li>
        </ul>
      </div>                         
    </div>
    <img src="@/assets/images/951.png" class="card819" alt="">
  </Fragment>
</template>

<script>
import { Fragment } from 'vue-fragment'
export default {
  name:'box-card-single-analysis1-huanzhetongji',
  components:{Fragment},
  props:{
    title:{
      type:String
    }
  }
}
</script>
<style lang="less" scoped>
.left{float: left;}
.right{float: right;}
.borderBottom-1px{
  border-bottom: .01rem solid #7787C7 ;
}
.borderBottom-2px{
  border-bottom: .02rem solid #7787C7 ;
}
.head-wrap{
    font-size: .16rem;
    color:#ffffff;
    overflow: hidden;
    .title{
      height: .26rem;
      line-height: .262rem;
    }
    .operate{
      span{
        height: .26rem;
        line-height: .26rem;
        display: inline-block;
        cursor: pointer;
        background: url('~@/assets/images/671.png') no-repeat center center;
        background-size: contain;
        padding: 1px .2rem;
      }
      span.active{
        background: url('~@/assets/images/670.png') no-repeat center center;
        background-size: contain;
        padding: 1px .2rem;
      }
    }
  }
.head-wrap{
    font-size: .16rem;
    color:#ffffff;
    overflow: hidden;
    .title{
      height: .26rem;
      line-height: .262rem;
    }
    .operate{
      span{
        height: 26px;
        line-height: 26px;
        display: inline-block;
        cursor: pointer;
        background: url('~@/assets/images/671.png') no-repeat center center;
        background-size: contain;
        padding: .01rem 20px;
      }
      span.active{
        background: url('~@/assets/images/670.png') no-repeat center center;
        background-size: contain;
        padding: .01rem 20px;
      }
    }
  }
  .content-wrap{
    width: 100%;
    height:calc( (100vh - 1.23rem) / 3 - .36rem) ;
    .chart-content{
      width: 100%;
      height:calc( (100vh - 1.23rem) / 3 - .36rem) ;
      float: left;
      overflow: hidden;
      ul{
        margin: 0;padding:0;
        list-style-type: none;
        font-size: .16rem;
        color:#ffffff;
        li{
          margin: 0;
          list-style-type: none;
          display:inline-block;
          background:url('~@/assets/images/1020.png') no-repeat;
          background-size:100%;
          background-position:center center;    
          width:1.692rem;
          height:1rem;
          margin-right:.1rem;  
          margin-left:.1rem;    
          margin-top:.13rem;
          .num{
            font-size:.14rem;
            text-align:center;
            padding-top:.2rem;
            color:#00C0FF;
            strong{
              font-size:.24rem;
            }
          }
          .word{
            text-align:center;
            padding-top:.1rem;
            .tip,.label{
              display:inline-block;
              vertical-align:top;
            }
            .tip{
              margin-top:0.7em;
              margin-right:.1rem;
              color:#00BEFD;
            }
            .label{
              .english{
                color:#B29D01;
                font-size:.1rem;
              }
            }
          }
        }
      }
    }
  }
  img{width: 100%;float: left;}
</style>